<template>
	<view class="main">
		<view  v-for="(item,index) in background" :key="index" class="background_main">
			<image :class="{'bgcolor':active==item.background}" @click="choosebgc(item.background)" :src="getImage(item.background)" mode="widthFix">
				
			</image>
		</view>
		<button @click="queding" style="background-color: #4300ca; font-size: 30upx; border-radius: 10upx; color: #FFFFFF; width: 90%;margin: 0 auto; margin-bottom: 30upx;"  type="default">确定</button>
		<button @click="xiangce" style="background-color: #0055ff; font-size: 30upx; border-radius: 10upx; color: #FFFFFF; width: 90%;margin: 0 auto; margin-bottom: 60upx;"  type="default">从相册里选择</button>
	<w-compress ref='wCompress' />
	</view>
	 
</template>

<script>

	import WCompress from '../../w-compress/w-compress.vue'
	import http from '../../utils/http.js';
	import Vue from "vue";
	export default {
		components: {
		        WCompress
		    },
		data() {
			return {
				active:"1.png",	
				background:[],
				upbgc:""
			}
		},
		mounted:function(){
			uni.setNavigationBarTitle({
			title:'选择背景图'
			})
			http.BackgroundList().then(list=>{
				console.log(list.data);
				this.background = list.data;
			})
		},
		methods: {
			getImage:function(url){
				return "https://www.camwork.site/rescourse/background/"+url;
			},
			choosebgc:function(index){
				console.log(index);
				this.active=index;
			},
			queding:function(){
				if(this.active==null){
					uni.showToast({
					    title: '您未选择背景',
					    duration: 1500
					});
				}else{
					http.updateBackground({
						openid:uni.getStorageSync("openid"),
						bgc:this.active
					}).then(list=>{
						console.log(list);
						uni.navigateBack()
					})
					
					}
				
			},
			xiangce:function(){
				var that = this
				this.active==null;
				uni.chooseImage({
					count:1,
					sizeType:['copressed'],
					success(res){
						uni.showLoading({ title: '图片上传中...', mask: true })
						that.$refs.wCompress.start(res.tempFilePaths[0],{
							pixels: 4000000,  // 最大分辨率，默认二百万
							quality: 0.4,     // 压缩质量，默认0.8
							type: 'jpg',      // 图片类型，默认jpg
							base64: false, 
						}).then(res=>{
							var imgFiles = res
							that.upbgc = imgFiles;
							console.log(that.upbgc)
							uni.compressImage({
								src:that.upbgc,
							})
							uni.uploadFile({
								  url:'https://www.camwork.site/uploadHandler1.ashx',
								  filePath:that.upbgc,
								  name: 'upload_file',
								  success(res1) {
									  console.log("上传是否成功",res1);
								  	that.upbgc = "bgc/"+res1.data;
									console.log("背景图",that.upbgc);
									uni.setStorageSync("mybackground",that.upbgc);
									console.log("背景图",uni.getStorageSync("mybackground"));
									console.log("openid",uni.getStorageSync("openid"));
									http.updateBackground({
										openid:uni.getStorageSync("openid"),
										bgc:uni.getStorageSync("mybackground")
										
									}).then(list=>{
										 uni.hideLoading()
										console.log(list);
										uni.showToast({
											title:"修改成功",
											duration:2000
										})
										uni.navigateBack()
									})
								  }
							});
							
						})
					
						
					
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.main{
	width: 100%;
	height: 100%;
	background-color: #333333;
}
.background_main{
	width: 90%;
	margin: 0 auto;
	
}

.bgcolor{
	-moz-box-shadow:6px 6px 12px 0px rgba(202, 16, 19, 0.7);
	-webkit-box-shadow:4px 4px 12px 0px rgba(212, 16, 19, 0.7);
	box-shadow:6px 6px 12px 
	            0px
	             rgba(172, 13, 16, 0.5);
}
image{
	width: 100%;
	margin-top: 20upx;
	margin-bottom: 22upx;
	border-radius: 10upx;
	          
}
</style>
